<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
	  $(document).ready(function(){
		
		$("#memberRegister").submit(function(){		
			<%-- 
					아이디 : 한글 , 특수문자 X
			--%>
			if($("#memberRegister :input[name=memberId]").val()==""){
				alert("아이디를 입력하세요");				
				return false;
			}
			<%--
					패스워드 : 한글 + 숫자 + 특수문자 조합
			--%>
			if($("#memberRegister :input[name=memberPassword]").val()==""){
				alert("패스워드를 입력하세요");				
				return false;
			}
			if($(":input[name=memberPassword1]").val()==""){
				alert("패스워드를 입력하세요");				
				return false;
			}
			<%--
					이름 : 숫자, 특수문자 불가능
			--%>
			if($(":input[name=memberName]").val()==""){
				alert("이름을 입력하세요");				
				return false;
			}
			if($(":input[name=memberName]").val().length>20){
				alert("이름의 길이가 깁니다 (최대 10글자)");
				return false;
			}		
			if($(":input[name=memberAddress]").val()==""){
				alert("주소를 입력하세요");				
				return false;
			}
			if($(":input[name=memberEmail]").val()==""){
				alert("Email주소를 입력하세요");				
				return false;
			}
			if($(":input[name=memberTel]").val()==""){
				alert("전화번호를 입력하세요");				
				return false;
			}
			var phoneNumberRegex = /^[0-9]{3}-[0-9]{3,4}-[0-9]{4}$/;
			if(!phoneNumberRegex.test($(":input[name=memberTel]").val())) {
			   alert("전화번호 형식에 맞게 입력하세요!");
			   return false;
			}
			if($("#idCheckView").text()!="사용가능!"){
				alert("중복확인된 아이디로 입력해주세요");
				return false;
			}
			if($("#emailCheckView").text()!=""){
				alert("중복확인된 email로 입력해주세요");
				return false;
			}
			var pass = $("#memberRegister :input[name=memberPassword]").val();
			var pass1 = $("#memberRegister :input[name=memberPassword1]").val();
			if(pass!=pass1){
				$("#passCheckView").html("비밀번호가 같지 않습니다!").css("background","red");
				return false;
			}
		});     
		$("#memberRegister :input[name=memberId]").keyup(function(){
			var id=$("#memberRegister :input[name=memberId]").val();
			 	if(id.length<4 || id.length>10){
				$("#idCheckView").html("아이디는 4자이상 10자 이하여야 함!").css(
						"background","pink");
				return;
				} 
			$.ajax({
				type:"POST",
				url:"${initParam.root}member/idDuplCheck.do",
				data:"memberId="+id,
				success:function(data){
					 if(data=="fail"){
					$("#idCheckView").html("사용불가!").css("background","red");
					}else{
						$("#idCheckView").html("사용가능!").css(
								"background","yellow");						
					}					
				}//callback			
			});//ajax
		});//keyup
		$(":input[name=memberEmail]").keyup(function(){
			var email=$(":input[name=memberEmail]").val();
			if(email.length<1){
			$("#emailCheckView").html("email 중복검사").css("background","lightblue");
			return;
			} 
				$.ajax({
				type:"POST",
				url:"${initParam.root}member/emailDuplCheck.do",
				data:"memberEmail="+email,
				success:function(data){
					 if(data=="fail"){
					$("#emailCheckView").html("사용불가!").css("background","red");
					} else{
						$("#emailCheckView").html("");			
					} 
				}//callback			
			});//ajax
		});//keyup
	});//ready
</script>    
 <center>
 <form method="post"  id="memberRegister" action="${initParam.root}member/memberRegister.do">
<h3><font color="skyblue"><b>회원가입</b></font></h3>
<table>
<tr>
<td><b>ID</b></td><td><input type="text" name="memberId"><span id="idCheckView"></span></td>
</tr>
<tr>
<td><b>이름</b></td><td><input type="text" name="memberName"></td>
</tr>
<tr>
<td><b>비밀번호</b></td><td><input type="password" name="memberPassword"></td>
</tr>
<tr>
<td><b>비밀번호확인</b></td><td><input type="password" name="memberPassword1"><span id="passCheckView"></span></td>
</tr>
<tr>
<td><b>E-Mail</b></td><td><input type="email" name="memberEmail"><span id="emailCheckView"></span></td>
</tr>
<tr>
<td><b>주소</b></td><td><input type="text" name="memberAddress"></td>
</tr>
<tr>
<td><b>연락처</b></td><td><input type="text" name="memberTel"></td>
</tr>
<tr>
<td colspan="4"><font size="2">※'-'을 넣어주세요. 예시)010-1111-2222</font></td>
</tr>
<tr>
<td colspan="4" align="center"><input type="submit" value="회원가입"></td>
</tr>
</table>
</form>
</center>